/*
 * @Author: xiaoyan
 * @Date: 2021-11-24 11:15:03
 * @LastEditors: xiaoyan
 * @LastEditTime: 2021-11-25 16:38:29
 * @Description: 
 * @FilePath: \user_auth_front\src\components\minModalConf\index.tsx
 */
import { Button, Modal } from "antd";
import { useMappedState,useDispatch} from 'redux-react-hook';
import { closeMinModal } from "@/store/modules/app"
export default ()=>{
    const dispatch = useDispatch();
    const minModalConf = useMappedState(state=>state.app.minModalConf);
    const handleOk = ()=>{
        if(typeof minModalConf.handleOk === "function") minModalConf.handleOk();
    };
    const handleCancel = ()=>{
        dispatch(closeMinModal());
        if(typeof minModalConf.handleCancel === "function") minModalConf.handleCancel();
    };
    const simpleFooter = [
        <Button key="close" type="primary" onClick={handleCancel}>关闭</Button>
    ];
    const customFooter = [
        <Button key="cancer" onClick={handleCancel}>取消</Button>,
        <Button key="submit" type="primary" onClick={handleOk} htmlType="submit">确定</Button>
    ];
    const footer = minModalConf.isCustom?customFooter:simpleFooter;
    return(
        <Modal centered destroyOnClose maskClosable={false} title={minModalConf.title} width={minModalConf.width} visible={minModalConf.isModalVisible} footer={footer} onOk={handleOk} onCancel={handleCancel}>
                {minModalConf.isModalVisible ? <minModalConf.views />:null}
        </Modal>
    );
}